<template>
  <div class="uni-margin-wrap">
    <swiper class="swiper" circular indicator-dots indicator-color="rgba(0, 0, 0, .3)" indicator-active-color="#FFF"
      autoplay :interval="2000" :duration="1000">
      <swiper-item v-for="item of SiteInfo.bannerInfo">
        <img mode="widthFix" class="carousel-img" :src="item.bannerUrl" @click="toPage(item.clickUrl)">
      </swiper-item>
    </swiper>
  </div>
</template>
<script setup>
import { onMounted, ref, toDisplayString } from 'vue'
import { getSiteInfo } from '@/api/home'
const SiteInfo = ref({})
onMounted(async () => {
  const res = await getSiteInfo()
  SiteInfo.value = res.data
})

const toPage = (path) => {
  console.log(path, 9958);
  if (isCanClick(path)) {
    uni.navigateTo({ url: `/pages/webview/index?url=${path}` })
  }
  // uni.navigateTo({
  //   url: path
  // })
  // uni.navigateTo({ url: `/pages/webview/index?url=${path}` })
}
function isCanClick(path) {
  if (path.indexOf('inviteFriend') > -1) {
    uni.navigateTo({
      url: `/pages/inviteFriends/index`
    })
  } else if (path.indexOf("http") > -1) {
    uni.navigateTo({ url: `/pages/webview/index?url=${path}` });
  }
  else if (path.indexOf(SiteInfo.siteDomain) == -1) {
    uni.showToast({
      title: '该地址不可以点击',
      icon: 'none'
    })

    return false;
  } else {
    return true;
  }
}
</script>
<style lang="less" scoped>
.uni-margin-wrap {
  margin-top: 30rpx;
  width: 100%;
  text-align: center;
  border-radius: 35rpx;
  overflow: hidden;

}

.swiper {
  height: 300rpx;
  width: 100%;
}

.swiper-item {
  display: block;
  height: 300rpx;
  line-height: 300rpx;
  text-align: center;
  background-color: red;
}

image {
  // border-radius: 15rpx;
  width: 100%;
}
</style>